import {paramStatus2Color} from '@/libs/text2Color'
import {CSSProperties, PropType} from 'vue'
import RollerDigital from '../rollerDigital'
import {CnMediumSpan, CnNormalSpan} from '../text'

export const ParamValue = defineComponent({
  props: {
    value: Number,
    unit: String,
    status: String,
    valueStyle: Object as PropType<CSSProperties>,
    unitStyle: Object as PropType<CSSProperties>
  },
  setup(props, ctx) {
    const devimals = computed(() => {
      const value = String(props.value)
      return value.split('.')[1] ? (value.split('.')[1].length < 2 ? 1 : 2) : 0
    })

    return () =>
      (props.value ?? null) !== null ? (
        <span class='inline-block'>
          <RollerDigital
            endVal={Number(props.value || 0)}
            decimals={devimals.value}
            style={Object.assign(
              {
                color: paramStatus2Color(props.status || '') + ' !important'
              },
              props.valueStyle
            )}
          ></RollerDigital>
          <CnNormalSpan class='ml-8'>{props.unit || ''}</CnNormalSpan>
        </span>
      ) : (
        <CnMediumSpan class='text-30 text-5xText'>---</CnMediumSpan>
      )
  }
})
